<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= el.number=0, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="animate.css">
<style>
  
  .box { position: absolute; left: 0;top:0; width: 240px; height: 160px; color: #fff}
  li{list-style: none}
    .cont { padding: 10px; font-size: 14px}
    .cont-name { text-align: right; padding: 20px; font-size: 16px;}
    .close { font-size: 20px; position: absolute; right: 0; top: 0; padding: 10px;}
</style>
<body>
        <script src="https://unpkg.com/vue"></script>
        <div id="app">
             <div>
                 <ul>
                     <li><input type="text" v-model="contName" placeholder="输入姓名"></li>
                     <li><textarea v-model="cont"placeholder="输入愿望"></textarea></li>
                     <li><button @click="createBox">creat</button></li>
                 </ul>
             </div>
             <transition-group
                 enter-active-class="animated zoomInLeft"
                 leave-active-class="animated zoomOutUp"
                 >
                 <div class="box" v-for="(data,index) in listData" :key="data.color" v-drag  :style="{
                    background:data.color,
                    left:data.l,
                    top:data.t
                  }">
                  <p class="cont">{{data.cont}}</p>
                  <p class="cont-name"> {{data.name}}</p>
                  <a href="javascript:;" class="close" @click="itemDel(index)">X</a>
             </div>
            </transition-group>
        </div>
        <script>
        Vue.directive("drag",function(el,binding){//绑定事件
            el.onmousedown=function(ev){
                var ev=ev||window.event
                //ev事件对象，可能是box里面的元素（这个时候会有bug）
                var disX = ev.offsetX;
                var disY = ev.offsetY;
                document.onmousemove=function(ev){
                  el.style.left = ev.clientX-disX+"px"
                  el.style.top = ev.clientY-disY+"px"
                }
                document.onmouseup=function(){
                   document.onmousemove=null;
                   document.onmouseup=null;
               
                }
            }
        })
        var app=new Vue({
            el:"#app",
            data:{//调用的数据部分
                listData:[],
                contName:"",
                cont:""
                },
                methods:{//事件
                    createBox(){
                        var r=Math.round(Math.random()*255)
                        var g=Math.round(Math.random()*255)
                        var b=Math.round(Math.random()*255)



                        var  maxL=document.documentElement.clientWidth-240
                        var  maxT=document.documentElement.clientHeight-160

                        this.listData.push({//push  追加
                            name:this.contName,
                            cont:this.cont,
                            color:`rgba(${r},${g},${b},.7)`,
                            l:Math.round(Math.random()*maxL)+'px',
                            t:Math.round(Math.random()*maxT)+'px'
                        })
                        },
                        itemDel(index){
             this.listData.splice(index,1)}
                }
        })
        
        </script>
</body>
</html>